<template>
  <globle-dialog ref="globleDialogRef" :title="globleDialogConfig.title" 
    @onClickCancelBtn="reset" @onBeforeColse="reset" @onClickConfirmBtn="reset">
    <globle-form ref="globleFormRef" :bindData="globleFormConfig.bindData"
      :itemConfig="globleFormConfig.itemConfig"></globle-form>
  </globle-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { APIData, ICourse } from '../../../../type';
import { formType, IGlobleFormProps, ISelectOption } from '../../../../components/form/type';
import { useAPI } from '../../../../request/api';
import { ElMessage } from 'element-plus';

let weekList = [] as ISelectOption[];
let weekDayList = [] as ISelectOption[];
let orderNumList = [] as ISelectOption[];
const api = useAPI();
const globleDialogRef = ref();
const globleFormRef = ref();
const globleDialogConfig = { title: '课程信息' };
const globleFormConfig: IGlobleFormProps = reactive({
  bindData: {} as ICourse,
  itemConfig: [
    {
      type: formType.input,
      label: '学年',
      disabled: true,
      prop: 'schoolYear',
    },
    {
      type: formType.select,
      label: '学期',
      disabled: true,
      prop: 'stage',
      isShow: true,
      options: [{ label: '第一学期', value: 1 }, { label: '第二学期', value: 2 }],
    },
    {
      type: formType.input,
      label: '年级',
      disabled: true,
      prop: 'grade',
    },
    {
      type: formType.input,
      label: '课程代码',
      disabled: true,
      prop: 'courseCode',
    },
    {
      type: formType.input,
      label: '课程名称',
      disabled: true,
      prop: 'courseName',
    },
    {
      type: formType.input,
      label: '教学班',
      disabled: true,
      prop: 'teachClass',
    },
    {
      type: formType.input,
      label: '开课类型',
      disabled: true,
      prop: 'courseType',
    },
    {
      type: formType.input,
      label: '学时类型',
      disabled: true,
      prop: 'classHourType',
    },
    {
      type: formType.input,
      label: '开课学院',
      disabled: true,
      prop: 'openCollege',
    },
    {
      type: formType.input,
      label: '课程学分',
      disabled: true,
      prop: 'credit',
    },
    {
      type: formType.input,
      label: '任务人数',
      disabled: true,
      prop: 'maxPerson',
    },
    {
      type: formType.input,
      label: '总学时',
      disabled: true,
      prop: 'totalHours',
    },
    {
      type: formType.multipleSelect,
      label: '课程周数',
      disabled: true,
      prop: 'week',
      isShow: true,
      options: weekList,
    },
    {
      type: formType.multipleSelect,
      label: '课程星期',
      disabled: true,
      prop: 'weekDay',
      isShow: true,
      options: weekDayList,
    },
    {
      type: formType.multipleSelect,
      label: '课程序号',
      disabled: true,
      prop: 'orderNum',
      isShow: true,
      options: orderNumList,
    },
    {
      type: formType.input,
      label: '上课地点',
      disabled: true,
      prop: 'place',
    },
    {
      type: formType.textarea,
      label: '面向对象',
      disabled: true,
      prop: 'allowBand',
      width: 510,
    }
  ],
});

const openDialogByCheck = async (courseId: string) => {
  globleDialogRef.value.isShowDialog = true;
  const res: APIData = await api.course.findOne({ courseId });
  if (res.code == 200) globleFormConfig.bindData = res.data;
  else ElMessage.error('课程信息请求错误，请重试')
};

onMounted(() => {
  for (let i = 1; i <= 16; i++) weekList.push({ label: '第' + i + '周', value: String(i) })
  for (let i = 1; i <= 7; i++) weekDayList.push({ label: chineseWeedDay(i), value: String(i) });
  for (let i = 1; i <= 12; i++) orderNumList.push({ label: chineseOrderNum(i), value: String(i) });
})

//卸载操作
const reset = () => {
  globleDialogRef.value.isShowDialog = false;
  const formEl = globleFormRef.value.formRef;
  globleFormConfig.bindData = {};
  formEl.resetFields();
};

// 转中文星期  计算属性
const chineseWeedDay = (weekDay: number) => {
  switch (weekDay) {
    case 1: return '星期一';
    case 2: return '星期二';
    case 3: return '星期三';
    case 4: return '星期四';
    case 5: return '星期五';
    case 6: return '星期六';
    case 7: return '星期天';
    default: return ''
  }
}

// 转中文课程序号  计算属性
const chineseOrderNum = (orderNum: number) => {
  switch (orderNum) {
    case 1: return '第一节';
    case 2: return '第二节';
    case 3: return '第三节';
    case 4: return '第四节';
    case 5: return '第五节';
    case 6: return '第六节';
    case 7: return '第七节';
    case 8: return '第八节';
    case 9: return '第九节';
    case 10: return '第十节';
    case 11: return '第十一节';
    case 12: return '第十二节';
    default: return ''
  }
}

defineExpose({
  openDialogByCheck
});
</script>

<style lang="scss" scoped>
.add-tch {
  article {
    font-size: 18px;
    font-weight: bold;
  }

  p {
    display: inline-block;
    font-weight: bold;
    margin-top: 4px;
    margin-right: 16px;
  }

  padding: 8px;
  padding-top: 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}
</style>
